/* 徽章组件 - HarmonyOS设计指南实现 */

@import '../base/color.less';
@import '../base/font.less';
@import '../base/window.less';

/* 徽章变量 */
:root {
  --badge-height: calc(16 * var(--unit));
  --badge-height-small: calc(12 * var(--unit));
  --badge-height-large: calc(20 * var(--unit));
  --badge-padding-x: calc(6 * var(--unit));
  --badge-padding-x-small: calc(4 * var(--unit));
  --badge-padding-x-large: calc(8 * var(--unit));
  --badge-border-radius: calc(8 * var(--unit));
  --badge-font-size: var(--font-size-caption-small);
  --badge-font-size-small: calc(10 * var(--unit));
  --badge-font-size-large: var(--font-size-caption-medium);
  --badge-dot-size: calc(8 * var(--unit));
  --badge-dot-size-small: calc(6 * var(--unit));
  --badge-dot-size-large: calc(10 * var(--unit));
  --badge-bg-color: var(--color-waring);
  --badge-text-color: var(--color-font-on-primary);
}

/* 基础徽章样式 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--badge-height);
  height: var(--badge-height);
  padding: 0 var(--badge-padding-x);
  font-size: var(--badge-font-size);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--badge-text-color);
  background-color: var(--badge-bg-color);
  border-radius: var(--badge-border-radius);
  white-space: nowrap;
  vertical-align: middle;
  box-sizing: border-box;
}

/* 徽章尺寸 */
.badge-small,
.badge.small {
  min-width: var(--badge-height-small);
  height: var(--badge-height-small);
  padding: 0 var(--badge-padding-x-small);
  font-size: var(--badge-font-size-small);
}

.badge-large,
.badge.large {
  min-width: var(--badge-height-large);
  height: var(--badge-height-large);
  padding: 0 var(--badge-padding-x-large);
  font-size: var(--badge-font-size-large);
}

/* 点状徽章 */
.badge-dot,
.badge.dot {
  min-width: var(--badge-dot-size);
  height: var(--badge-dot-size);
  padding: 0;
  border-radius: 50%;
  
  &.badge-small,
  &.small {
    min-width: var(--badge-dot-size-small);
    height: var(--badge-dot-size-small);
  }
  
  &.badge-large,
  &.large {
    min-width: var(--badge-dot-size-large);
    height: var(--badge-dot-size-large);
  }
}

/* 徽章颜色变体 */
.badge-primary,
.badge.primary {
  background-color: var(--color-brand);
  color: var(--color-font-on-primary);
}

.badge-success,
.badge.success {
  background-color: var(--color-confirm);
  color: var(--color-font-on-primary);
}

.badge-warning,
.badge.warning {
  background-color: var(--color-alert);
  color: var(--color-font-on-primary);
}

.badge-danger,
.badge.danger {
  background-color: var(--color-waring);
  color: var(--color-font-on-primary);
}

.badge-secondary,
.badge.secondary {
  background-color: var(--color-comp-background-tertiary);
  color: var(--color-font-secondary);
}

/* 徽章位置 - 用于在图标或按钮上显示 */
.badge-wrapper {
  position: relative;
  display: inline-block;
}

.badge-wrapper .badge {
  position: absolute;
  top: calc(-4 * var(--unit));
  right: calc(-4 * var(--unit));
  z-index: 10;
  transform: translate(50%, -50%);
  box-shadow: 0 0 0 calc(2 * var(--unit)) var(--color-comp-background-primary);
}

/* 徽章溢出样式 */
.badge-overflow,
.badge.overflow {
  min-width: auto;
  padding: 0 var(--badge-padding-x-small);
  font-size: var(--badge-font-size-small);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .badge-secondary,
  .badge.secondary {
    background-color: var(--color-comp-background-tertiary);
    color: var(--color-font-secondary);
  }
}

